<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
 * {
            margin: 0;
            padding: 0;
        }

        body a {
            text-decoration: none;
            color: #0d3a4b;
        }

        .active {
            color: #ffffff;
        }

        .wrap {
            width: 700px;
            height: 500px;
            background-color: skyblue;
            margin: 0 auto;
            position: relative;
        }

        .wrap #table {
            width: 460px;
            border-radius: 12px;
            position: absolute;
            left: 50%;
            top: 160px;
            transform: translateX(-50%);
            box-sizing: border-box;
            overflow: hidden;
        }

        .wrap #table thead {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            color: #fff;
            background: #4cbfe5;
        }

        .wrap #table thead a {
            color: #fff;
        }

        .wrap #table tbody {
            color: #19c2ff;
        }

        .wrap #table tbody a {
            color: #19c2ff;
        }

        .wrap #table tbody tr {
            background: #fff;
            text-align: center;
        }

        .ctrl {
            position: absolute;
            left: 200px;
            top: 100px;
        }

        .ctrl div {
            width: 300px;
            line-height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        h1 {
            text-align: center;
            padding-top: 20px;
            color: white;
        }

</style>
<body>
    <div class="wrap">
        <h1>员工列表</h1>
        <div class="ctrl">
            <div class="age_sort nu">
                <a href="javascript:;">年龄从小到大</a>
                <a href="javascript:;">年龄从大到小</a>
                <a href="javascript:;" class="active">默认排序</a>
            </div>
            <div class="gender_show">
                <a href="javascript:;">只显示男性</a>
                <a href="javascript:;">只显示女性</a>
                <a href="javascript:;" class="active">默认</a>
            </div>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>0</th>
                    <th>小明</th>
                    <th>24</th>
                    <th>男</th>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
var data = [
            {
                id: 1,
                name: '小明',
                age: 24,
                gender: '男'
            },
            {
                id: 2,
                name: '小芳',
                age: 30,
                gender: '女'
            },
            {
                id: 3,
                name: '小美',
                age: 31,
                gender: '女'
            },
            {
                id: 4,
                name: '小刚',
                age: 21,
                gender: '男'
            },
            {
                id: 5,
                name: '小琪',
                age: 18,
                gender: '女'
            }
        ];
            // 通过函数 渲染数据清空tbody里面的东西
            //1. 根据数据生成tr标签,里面的内容就是数据
            randerData(data);
            function randerData(){
                var tbodyEl = document.querySelector('tbody');
                tbodyEl.innerHTML = "";
                // 循环数据,创建数据,添加数据
                data.forEach(function(item){
                    var trEl = document.createElement('tr');
                    trEl.innerHTML = `
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.gender}</td>
                    `
                    // appendChild 后面接的是对象
                    // innerHTML 后面接的是字符串
                    tbodyEl.appendChild(trEl);
                })
            }
            // 调用渲染数据
            



            // 设置全局变量 来纪录 年龄筛选按钮 和 性别 筛选按钮所在的位置
            let ageIndex = 2;
            let genderIndex = 2;


            
            //2.给每个a绑定点击事件
            dataRander();
            function dataRander(){
                // 获取三个a
                var sortEl = document.querySelectorAll('.age_sort a');
                // 声明数组里面的三个函数
                // sort 方法进行排序
                // 声明一个数组来判断符合条件的值,用sort方法进行排序
                var sortArr = [function(data){
                    var res = JSON.parse(JSON.stringify(data));
                    res.sort(function(a,b){
                        return a.age - b.age
                    })
                    return res
                },function(data){
                    var res = JSON.parse(JSON.stringify(data));
                    res.sort(function(a,b){
                        return b.age - a.age
                    })
                    return res
                },function(data){
                    return data
                }]

                sortEl.forEach(function(item,key){
                    item.onclick = function(){
                        // 排他思想
                        sortEl.forEach(function(ele){
                            ele.classList.remove("active");
                        })
                        this.classList.add("active");

                        ageIndex = key;
                        var res = sortArr[key](data);

                        var newres = genderArr[genderIndex](res);

                        // 重新渲染
                        randerData(newres);

                    }
                }) 






                var genderEl = document.querySelectorAll('.gender_show a');

                var genderArr = [function(data){
                    return data.filter(function(item){
                        return item.gender === '男';
                    })
                },function(data){
                    return data.filter(function(item){
                        return item.gender === '女';
                    })
                    },function(data){
                        return data
                    }
            ]
                 genderEl.forEach(function(item,key){
                    item.onclick = function(){
                        genderEl.forEach(function(ele,k){
                            if(k === key ){
                                ele.classList.add("active");
                            }else{
                                ele.classList.remove("active");
                            }
                        })
                        genderIndex = key;

                        var res = genderArr[key](data);// 性别筛选
                        var newres = sortArr[ageIndex](res);

                        randerData(newres);

                    }
                 })
            }





            
               
    </script>
</body>
</html>